/**
 * datasource.js - 数据源管理页面业务逻辑
 * 功能：数据源的增删查
 */

/**
 * 页面加载完成后的初始化
 */
document.addEventListener('DOMContentLoaded', () => {
    loadList(); // 加载数据源列表
    document.getElementById('addForm').addEventListener('submit', handleAdd); // 绑定表单提交事件
});

/**
 * 打开添加数据源弹窗
 */
function openAddModal() {
    const modal = document.getElementById('addModal');
    const form = document.getElementById('addForm');
    const statusEl = document.getElementById('addStatus');

    if (modal) modal.style.display = 'flex';
    if (form) form.reset(); // 重置表单
    if (statusEl) statusEl.textContent = ''; // 清空状态提示

    // 阻止背景滚动
    document.body.classList.add('modal-open');
}

/**
 * 关闭添加数据源弹窗
 */
function closeAddModal() {
    const modal = document.getElementById('addModal');
    if (modal) modal.style.display = 'none';

    // 恢复背景滚动
    document.body.classList.remove('modal-open');
}

/**
 * 点击弹窗外部区域时关闭弹窗
 */
window.onclick = function (event) {
    const modal = document.getElementById('addModal');
    if (modal && event.target === modal) {
        closeAddModal();
    }
};

/**
 * 处理添加数据源表单提交
 * @param {Event} e - 表单提交事件
 */
async function handleAdd(e) {
    e.preventDefault(); // 阻止默认提交行为

    // 构建请求数据对象
    const data = {
        dbType: document.getElementById('dbType')?.value,
        host: document.getElementById('host')?.value.trim(),
        port: parseInt(document.getElementById('port')?.value, 10),
        username: document.getElementById('username')?.value.trim(),
        password: document.getElementById('password')?.value
    };

    // 前端校验
    if (!data.dbType || !data.host || !data.port || !data.username || !data.password) {
        alert('请填写完整信息');
        return;
    }

    const statusEl = document.getElementById('addStatus');
    if (statusEl) {
        statusEl.textContent = '提交中...';
        statusEl.className = 'status';
    }

    try {
        const res = await API.addDataSource(data);

        if (res.code === 200) {
            // 添加成功
            if (statusEl) showMessage(statusEl, '✅ 添加成功', 'success');
            setTimeout(() => {
                closeAddModal();
                loadList(); // 刷新列表
            }, 800);
        } else {
            // 添加失败
            const errorMsg = res.message || '添加失败';
            if (statusEl) showMessage(statusEl, '❌ ' + errorMsg, 'error');
        }
    } catch (err) {
        // 网络异常
        console.error('添加数据源失败:', err);
        if (statusEl) showMessage(statusEl, '❌ 网络错误: ' + err.message, 'error');
    }
}

/**
 * 加载数据源列表并渲染到页面
 */
async function loadList() {
    const container = document.getElementById('listContainer');
    if (!container) return;

    // 显示加载中状态
    container.innerHTML = '<p class="loading">加载中...</p>';

    try {
        const res = await API.getDataSourceList();

        if (res.code === 200 && Array.isArray(res.data)) {
            if (res.data.length === 0) {
                // 无数据提示
                container.innerHTML = '<p>暂无数据源，请点击上方"+ 添加数据源"按钮添加</p>';
                return;
            }

            // 构建表格HTML
            let html = `
                <div class="table-responsive">
                    <table>
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>类型</th>
                                <th>主机</th>
                                <th>端口</th>
                                <th>用户名</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
            `;

            // 渲染每一行数据
            res.data.forEach(item => {
                html += `
                    <tr>
                        <td>${item.id}</td>
                        <td>${item.dbType}</td>
                        <td>${item.host}</td>
                        <td>${item.port}</td>
                        <td>${item.username}</td>
                        <td>
                            <button class="danger" onclick="deleteDs(${item.id})">删除</button>
                        </td>
                    </tr>
                `;
            });

            html += '</tbody></table></div>';
            container.innerHTML = html;
        } else {
            // 接口返回失败
            container.innerHTML = `<p class="error">加载失败: ${res.message || '未知错误'}</p>`;
        }
    } catch (err) {
        // 网络异常
        console.error('加载数据源列表失败:', err);
        container.innerHTML = `<p class="error">网络异常: ${err.message}</p>`;
    }
}

/**
 * 删除指定ID的数据源
 * （挂载到window供内联onclick调用）
 * @param {number} id - 数据源ID
 */
window.deleteDs = async function (id) {
    // 二次确认
    if (!confirm(`确定要删除ID为 ${id} 的数据源吗？此操作不可恢复。`)) {
        return;
    }

    try {
        const res = await API.deleteDataSource(id);

        if (res.code === 200) {
            alert('删除成功');
            loadList(); // 刷新列表
        } else {
            alert('删除失败: ' + (res.message || '未知错误'));
        }
    } catch (err) {
        console.error('删除数据源失败:', err);
        alert('网络错误: ' + err.message);
    }
};